<template>
  <div class="attentionPage">
    <div class="show" v-for = "(follower , index) in followers" :key="index">     
            <div class="head"> <!--个人信息面板-->
                <img src="../../assets/logo.png" alt="">
                <div class="name"> <!-- 昵称-->
                    <div>
                        <span style="font-size: 16px; color:  color: rgba(0,0,0,.85);;">
                        {{ follower.nickname}}
                        </span>
                    </div>
                    <div class="grade">
                     <span> {{follower.grade}}</span> <!-- 等级-->                      
                    </div>
                </div>
                <div class="introduce">
                    <span>{{ follower.brief }}</span>
                </div>
                <div class="btn">
                <el-button type="primary" plain>取消关注</el-button>
                </div>
            </div>
           
        </div>
  </div>
</template>

<script>
export default {
name:'Attention',
data() {
    return {
        followers:[
        {
            nickname:'王贝贝',
            grade:'v3',
            brief:'我是王贝贝',

        }
           ,
        {
                    nickname:'陈亦康',
                    grade:'v5',
                    brief:"我是陈亦康"


                },
                {
                    nickname:'董佼能',
                    grade:'v3',
                    brief:"我是陈亦康"

                },
                {
                        nickname:'杜鹏展',
                        grade:'v3',
                    brief:"我是陈亦康"

                }
        ]
    }
},

}
</script>

<style scoped>


.show{
  width: 900px;
  height: 100%;
  background-color:rgba(255, 255, 255, 0.8);
  margin: 20px auto;
  padding-bottom: 20px;
  padding-left: 20px;
}
.nickname {
    color: rgba(0, 0, 0, .85);
    font-weight: 600;
    font-size: 20px;
}
img{
    margin: 10px 0;
    width: 60px;
    height: 60px;
    border-radius: 30px;
}
.introduce{
    width: 70%;
    height: 100%;
    color: rgba(0, 0, 0, .45);
    margin-left: -200px ;
    margin-top: 45px;
    /* word-wrap: break-word; */
    overflow-wrap: break-word;
}
.head{
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    border-bottom: 1px;
    border-bottom-color: rgba(0, 0, 0, 0.08);
    border-bottom-style: solid;
}
.name{
    width: 200px;
    height: 20px;
    margin-top: 10px;
    margin-left: 20px;
    display: flex;
    flex-wrap: wrap;
}
.grade>span {
    padding: 3px 5px;

}


.grade {
    color: green;
    width: 30px;
    height: 20px;
    margin-top: 2px;
    margin-left: 15px;
    border: 1px solid rgb(66, 103, 10);

}
.btn{
    position: absolute;
    right: 10px;
    top: 20%;
}

</style>